<%@ page language="java" import="java.util.*,ms.platform.system.model.*"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<title>进度查看</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 引用新样式 start -->
<jsp:include page="../../jsp/public.jsp" flush="true" />
<script type="text/javascript"
	src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/progress/progressView.js"></script>
<script>
function queryModelList(){
	if(!validateDate()){
		return;
	}
	 var data=$("#queryForm").serialize();
		window.location.href="<%=path%>/bus/prgview/query?"+data;
}
function validateDate(){
	var startDate = $("#startDate").val();
	var endDate = $("#endDate").val();
	if(!startDate){
		msgFeedBack("开始时间必须输入","#startDate");
		return false;
	}
	if(!endDate){
		msgFeedBack("结束时间必须输入","#endDate");
		return false;
	}
	return true;
}
//获取台账明细
function showReportRecord(modelNo, reportDate,engineering){
	var data = {
			modelCode : modelNo,
			recordDate : reportDate,
			engineering : engineering
	}
	$("#modelTitle").html(modelNo+"  "+reportDate+"  台账信息" );//加载标题
	var url = "<%=path%>/bus/prgview/queryProgessAccount";
	$.ajax({
		type : "post",
		url : url,
		data : data,
		dataType : "json",
		success : function(data) {
			
			//清空表格
			$("#progressDetail").html("");
			//加载数据
			$.each(data.data, function(index, value) {
				var str = "";
				str = "<tr><td>"+Number(index+1)+"</td><td>"+value.recordDate+"</td><td>"+value.submitPeople+"</td>" +
						"<td>"+value.progress+"</td>" +
								"<td>"+value.reason+"</td><td>"+value.recordDate+"</td>" +
										"<td>"+value.note+"</td><td>"+value.auditTime+"</td><td>"+value.auditPeople+"</td>" +
												"<td>"+value.auditResult+"</td><td>"+value.auditAdvise+"</td><td><span class = 'hand-like' onClick = 'toView("+value.recordId+","+value.recordDetailId+")'>查看</span></td></tr>";
				$("#progressDetail").append(str);
			});
			setIframeHeight(window.parent.document.getElementById("myWindow"));//iframe自适应高度
		}
	});
}
//弹出详细
function toView(recordId,recordDetailId){
	$('#code').center();
	$('#goodcover').show();//弹出层
	$('#code').fadeIn();
	var data = {
			recordId :recordId,
			recordDetailId : recordDetailId
	}
	var url = "<%=path%>/bus/prgview/toView";
		$
				.ajax({
					type : "post",
					url : url,
					data : data,
					dataType : "json",
					success : function(data) {
						if (data.code == 0) {
							$("#planProgress").text(data.data.planProgress);
							$("#planPro").text(data.data.planPro);
							$("#reportDate").text(data.data.reportDate);
							$("#targetPre").text(data.data.targetPre);
							$("#currentPro").text(data.data.currentPro);
							$("#accPro").text(data.data.accPro);
							$("#accPre").text(data.data.accPre);
							$("#proStatus").text(data.data.proStatus);
							$("#extDay").text(data.data.extDay);
							$("#extReason").text(data.data.extReason);
							$("#auditStatus").text(data.data.status);
							$("#advise").text(data.data.advise);
							$("#bak").text(data.data.remark);
							//清空缓存图片
							$(".imgList").html("");
							$(".btnList").html("");
							$
									.each(
											data.data.annexDto,
											function(i, url) {
												var jq = url.path
														.lastIndexOf(".");
												var arr = url.path.substr(jq);
												var picList = ".jpg .JPEG .png .PNG .jpeg .JPG";
												var videoList = ".mp4 .MP4 .mov .MOV";
												var liList
												if (picList.indexOf(arr) >= 0) {
													liList = "<li><a href='"+url.path+"' target='view_window'><img src='"+url.path+"' alt=''/></a></li>"
												} else if (videoList
														.indexOf(arr) >= 0) {
													liList = "<li><a href='"
															+ url.path
															+ "' onclick='showOriginalVideo(this)' target='view_window'><video controls><source src='"+url.path+"' type='video/mp4' /></video></a></li>"
												}
												$(".imgList").append(liList);
												var _btn = "";
												if (i == 0) {
													_btn = "<li class='cur'><span></span></li>";
												} else {
													_btn = "<li><span></span></li>";
												}
												$(".btnList").append(_btn);
											});
							Scroll("bannerCon", 600, 4000);//读取轮播事件
						} else {
							msgPrompt(data.message);
						}
					}
				});
	}

	function setIframeHeight(iframe) {
		if (iframe) {
			var iframeWin = iframe.contentWindow;
			if (iframeWin.document.body) {
				iframe.height = iframeWin.document.documentElement.scrollHeight
						|| iframeWin.document.body.scrollHeight;
			}
		}
	}

	window.onload = function() {
		//iframe自适应高度
		setIframeHeight(window.parent.document.getElementById("myWindow"));
	};
</script>
<style type="text/css">
.no-bar::-webkit-scrollbar {
	display: none;
}
/* .hand-like{
	cursor:pointer;
} */
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a, img {
	border: 0;
}
/*按钮样式*/
#ClickMe {
	width: 200px;
	height: 30px;
	border: 1px solid #C40000;
	background-color: #000;
	color: #FFF;
	margin: 0 auto;
}

#goodcover {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: 0.50;
	filter: alpha(opacity = 80);
}

#code {
	width: 800px;
	height: 100%;
	background-color: #fff;
	display: none;
	left: 0%;
	z-index: 1002;
	overflow: hidden;
}

/* .close1 {
	width: 300px;
	height: 0px;
}

#closebt {
	float: right;
}

#closebt img {
	width: 20px;
} */
.goodtxt {
	text-align: center;
	/* width:500px;
	height:500px; */
}

.goodtxt p {
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color: #000;
	font-weight: 600;
}

body, p, ul, ol, li {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

img {
	border: none;
}

a, button {
	outline: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* 具体样式 */
.banner {
	position: relative;
	height: 300px;
	overflow: hidden;
}

.banner .bannerCon {
	position: absolute;
	top: 0;
	left: 50%;
	width: 800px;
	height: 400px;
	margin-left: -400px;
	overflow: hidden;
}

.bannerCon .imgList {
	position: absolute;
	top: 0;
	left: 0;
	width: 99999px;
	height: 400px;
}

.bannerCon .imgList li {
	float: left;
	width: 800px;
	height: 400px;
}

.bannerCon .imgList li a {
	position: relative;
	display: block;
	height: 100%;
}

.bannerCon .imgList li img {
	width: 800px;
	height: 400px;
}

.bannerCon .pre-nex {
	display: none;
	position: absolute;
	top: 50%;
	width: 40px;
	height: 60px;
	margin-top: -40px;
	font: bold 40px/60px Simsun;
	color: #ccc;
	text-align: center;
	border: none;
	background: rgba(0, 0, 0, .30);
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000,
		endColorStr=#4c000000);
	cursor: pointer;
	z-index: 3;
}

.bannerCon .pre-nex.show {
	display: inline-block;
}

.bannerCon .prev {
	left: 13%;
}

.bannerCon .next {
	right: 13%;
}

.bannerCon .btnList {
	position: absolute;
	left: 0;
	bottom: 20px;
	width: 100%;
	height: 12px;
	text-align: center;
	z-index: 2;
	_overflow: hidden;
}

.bannerCon .btnList li {
	display: inline;
}

.bannerCon .btnList li span {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	border-radius: 6px;
	background-color: #14829e;
	cursor: pointer;
}

.bannerCon .btnList li.cur span {
	background-color: #f30;
}
</style>
<body>
	<div class="col-lg-10 index-nav-right-con" style="width: 100%">
		<div class="index-nav-right" style="width: 100%">
			<div class="index-nav-right-header">
				<span>当前位置 > 金型进度管理 > <b>金型进度查看 </b></span>
			</div>
		</div>
		<div class="right-table" style="width: 100%">
			<form id="queryForm" method="post">
				<div class="progress-search-con">
					<div class="progress-search-form clearFix">
						<div class="progress-search-form-input">
							<label>部品番号</label> <input type="text" name="modelCode"
								value="${map['modelCode'] }">
						</div>
						<div class="progress-search-form-input">
							<label>机种</label> <select name="modelType" id="modelType">
								<option value="">请选择</option>
								<c:if test="${not empty mTypeList}">
									<c:forEach items="${mTypeList }" var="mTypeList" varStatus="m">
										<option value="${mTypeList.targetName}"
											<c:if test="${map['modelType'] ==mTypeList.targetName }">selected</c:if>>${mTypeList.targetName}</option>
									</c:forEach>
								</c:if>
							</select>
						</div>
						<div class="progress-search-form-input">
							<label>厂商</label> <select name="factory" id="factory">
								<option value="">请选择</option>
								<c:if test="${not empty factorys}">
									<c:forEach items="${factorys }" var="factory" varStatus="m">
										<option value="${factory.orgCode }"
											<c:if test="${map['factory'] ==factory.orgCode }">selected</c:if>>${factory.orgName}</option>
									</c:forEach>
								</c:if>
							</select>
						</div>
						<div class="progress-search-form-input">
							<label>计划状态</label> <select name="planStatus" id="">
								<option value=""
									<c:if test="${map['planStatus'] =='' }">selected</c:if>>请选择</option>
								<option value="0"
									<c:if test="${map['planStatus'] =='0' }">selected</c:if>>未提交</option>
								<option value="1"
									<c:if test="${map['planStatus'] =='1' }">selected</c:if>>已下发</option>
								<option value="2"
									<c:if test="${map['planStatus'] =='2' }">selected</c:if>>已完成</option>
							</select>
						</div>
						<div class="progress-search-form-input">
							<label>开始时间<font color="red">*</font></label> <input
								class="Wdate" name="startDate" id="startDate"
								onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"
								value="${map['startDate'] }" required />
						</div>
						<div class="progress-search-form-input">
							<label>结束时间<font color="red">*</font></label> <input
								class="Wdate" name="endDate" id="endDate"
								onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"
								value="${map['endDate'] }" required />
						</div>
						<div style="float: right; border: 0px solid red; width: 100px;"
							class="search-form-btn search-form-input">
							<button class="btn btn-primary search-form-btn-s"
								style="color: black;" onClick="queryModelList()">搜索</button>
						</div>
					</div>

				</div>
			</form>
			<div class="progress-date-table index-table" style="overflow: auto;">
				<div style="">
				<div style="width:100%; float:right; overflow: scroll;">
					<table class="table table-striped" class="font"
						style="width: 100%; text-align: center;">
						<thead>
							<tr class="table-thead">
								<th style="">PRG</th>
								<c:forEach items="${cloumns }" var="column" varStatus="r">
									<th style="width: 80px">${column.date }</th>
								</c:forEach>
								<th style="width: 80px">总天数</th>
							</tr>
						</thead>
						<c:if test="${not empty list}">
							<tbody>
							<c:forEach items="${list }" var="model" varStatus="r">
								<tr class="progress-date-table-tr">
									
												<td style="height: 68px"><span>${model.modelNo }</span><span>${model.factory }</span><span>${model.engineering }&nbsp;&nbsp;
														${model.modelLevel }</span></td>
										
										<c:forEach items="${model.items }" var="item" varStatus="r1">
											<td style="height: 68px"><span>${item.progress }</span>
												<c:if test="${item.status=='正常'}">
													<i class="progress-circle-black" style="cursor: pointer;"
														onclick="showReportRecord('${model.modelNo}', '${item.reportDate }','${model.engineering}');">${item.days }</i>
												</c:if> <c:if test="${item.status=='提前' }">
													<i class="progress-circle-purple" style="cursor: pointer;"
														onclick="showReportRecord('${model.modelNo}', '${item.reportDate }','${model.engineering }');">${item.days }</i>
												</c:if> <c:if test="${item.status=='延期' }">
													<i class="progress-circle-pink" style="cursor: pointer;"
														onclick="showReportRecord('${model.modelNo}', '${item.reportDate }','${model.engineering }');">${item.days }</i>
												</c:if></td>
										</c:forEach>
										<td><span>实际天数</span><span>${model.actualDays }</span></td>
								</tr>
								</c:forEach>
							</tbody>
						</c:if>
					</table>
					</div>
				</div>
			</div>
			<div class="progress-list-table index-table" style="margin-top: 0px">
				<div style="padding: 10px 0px 0px 23px">
					<label style="background-color: #8e9ef5; color: #fff"
						id="modelTitle"></label>
				</div>
				<table class="table table-striped">
					<thead>
						<tr class="table-thead">
							<th>序号</th>
							<th>台账日</th>
							<th>提交人</th>
							<th>进度%</th>
							<th>原因</th>
							<th>提交时间</th>
							<th>提交备注</th>
							<th>审核时间</th>
							<th>审核人</th>
							<th>审核结果</th>
							<th>审核建议</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="progressDetail">

					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- 弹出层 start -->
	<div id="goodcover"></div>

	<div id="code" class="bannerCon" style="height: 800px;">
		<div class="close1">
			<a href="javascript:void(0)" id="closebt"></a>
		</div>
		<div class="goodtxt">
			<div class="wrap">
				<div class="banner">
					<div class="bannerCon">
						<ul class="imgList clearfix">

						</ul>
						<ul class="btnList clearfix">

						</ul>
						<span class="pre-nex prev"><</span> <span class="pre-nex next">></span>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 0px">
			<div class="goodtxt">
				<table
					style="border-collapse: separate; border-spacing: 10px; width: 800px">
					<tr>
						<td>计划进度:</td>
						<th class=""><span id="planProgress">${progress.planProgress }</span></th>
						<td>计划完成比例:</td>
						<th class=""><span id="planPro">${progress.planPro}</span><span>%</span></th>
						<td class="">汇报日期:</td>
						<th class=""><span id="reportDate">${progress.reportDate }</span></th>
						<td>目标精度:</td>
						<th class=""><span id="targetPre">${progress.targetPre }</span><span>%</span></th>
					</tr>
					<tr>
						<td>当前进度:</td>
						<th class=""><span id="currentPro">${progress.currentPro }</span></th>
						<td>实际完成比例:</td>
						<th class=""><span id="accPro"></span><span>%</span></th>
						<td>实际精度:</td>
						<th class=""><span id="accPre"></span><span>%</span></th>
						<td>进度状态:</td>
						<th class=""><span id="proStatus">${progress.proStatus }</span></th>
					</tr>
					<tr>
						<td>延期/提前天数:</td>
						<th class=""><span id="extDay"></span></th>
						<td>延期原因:</td>
						<th class=""><span id="extReason"></span></th>
					</tr>
					<tr>
						<td>备注:</td>
						<th class=""><span id="bak"></span></th>
					</tr>
					<tr>
						<td>审核结果:</td>
						<th class="" id="auditStatus">通过</th>
					</tr>
					<tr>
						<td>审核意见:</td>
						<th class="" id="advise"></th>
					</tr>
				</table>

			</div>
		</div>
	</div>
	<!-- 弹出层 end -->
</body>
</html>